<template>
  <div class="dashboard-container">;
    <div class="app-container">
      <el-card shadow="never">
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 数据 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" :label="$t('table.operationType')">
            <template v-slot="scope">
              <span>{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.operator')">
            <template v-slot="scope">
              <span>{{ scope.row.author }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.results')">
            <template v-slot="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.operationDate')">
            <template v-slot="scope">
              <span>{{ scope.row.display_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.describe')">
            <template v-slot="scope">
              <span>{{ scope.row.forecast }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination-container">
          <PageTool
            :paginationPage="pagination.page"
            :paginationPagesize="pagination.pageSize"
            :total="pagination.total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          >
          </PageTool>
        </div>
        <!-- end -->
      </el-card>
    </div>
  </div>
</template>

<script>
// import { list } from '@/api/base/logs'
import PageTool from './../components/page-tool'
import { list } from '@/api/example/table'
export default {
  name: 'base-logs',
  components: {
    PageTool
  },
  data () {
    return {
      dataList: [],
      tableKey: 0,
      total: null,
      listLoading: true,
      dialogStatus: '',
      alertText: '',
      pagination: {
        page: 1,
        // pagesize: 10
        total: 0,
        pageSize: 20,
        pageSizes: [20, 50, 80, 120],
        currentPage: 1
      }
    }
  },
  computed: {},
  methods: {
    // 获取列表数据
    getList (page = 1, limit = 20) {
      this.listLoading = true
      // list(this.requestParameters)
      //   .then(data => {
      //     this.dataList = data.data.list
      //     this.total = data.data.counts
      //     this.alertText = `共 ${this.total} 条记录`
      //     this.listLoading = false
      //   })
      //   .catch(e => {
      //     this.$message.e('错了哦，这是一条错误消息')
      //   })
      this.pagination.currentPage = page
      this.pagination.pageSize = limit
      this.alertText = ''
      this.dataList = []
      list({ page, limit })
        .then((res) => {
          // console.log(res.data)
          this.dataList = res.data.items
          this.pagination.total = res.data.total
          this.alertText = `共 ${this.pagination.total} 条记录`
        })
        .catch((e) => {
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      if (this.pagination.page === 1) {
        this.getList(this.pagination)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getList()
    }
  },
  // 挂载结束
  mounted: function () {},
  // 创建完毕状态
  created () {
    this.getList()
  },
  // 组件更新
  updated: function () {}
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
</style>
